<template>
  <div class="home-container">
    <!-- 星空背景代码 -->
    <star-canvas></star-canvas>

    <el-header>
      <!-- 学术星河 Logo 和文字 -->
      <div class="logo-container">
        <img src="../../../assets/logo.png" alt="Logo" class="logo-img">
        <h1 class="platform-name">学 术 星 河 · AcadGalaxy</h1>
      </div>

      <!-- 搜索框和搜索图标容器 -->
      <div class="search-container">
        <!-- 搜索框和搜索图标水平布局 -->
        <div class="search-box-container">
          <!-- 下拉框 -->
          <el-select v-model="selectedOption" 
            placeholder="Select" 
            :placement="bottom-start"
            :fit-input-width="true"
            class="custom-select">
            <el-option label="文献" value="paper" style="color: var(--main-color);"></el-option>
            <el-option label="学者" value="scholar" style="color: var(--main-color);"></el-option>
            <el-option label="期刊" value="venue" style="color: var(--main-color);"></el-option>
            <el-option label="组织" value="org" style="color: var(--main-color);"></el-option>
            <el-option label="领域" value="concept" style="color: var(--main-color);"></el-option>
          </el-select>

          <!-- 搜索框 -->
          <!-- <el-input
            v-model="searchInput"
            class="search-box"
            :placeholder="dynamicPlaceholder"
            clearable
          ></el-input> -->

          <el-autocomplete
            v-model="searchInput"
            class="search-box"
            :placeholder="dynamicPlaceholder"
            :fetch-suggestions="querySearchAsync"
            :placement="bottom-start"
            :fit-input-width="true"
            style="width:400px"
            clearable
            @keyup.enter="search"
          ></el-autocomplete>


          <!-- 搜索图标 -->
          <el-button @click="search" type="primary" :icon="Search" color="var(--main-color)" class="search-button">
            <el-icon size="20" class="search-icon">
              <Search />
            </el-icon>
          </el-button>
        </div>
      </div>
    </el-header>
    
    <el-main>
      <platform-statistic :sum_statistics="this.sum_statistics"></platform-statistic>
      
      <!-- ECharts 柱状图容器 -->
      <div 
      ref="barChart" 
      style="height: 540px; width: 550px; background-color: aliceblue; padding: 20px; margin-top: 40px; transform: scale(1.25);"></div>

      <div class="concept">
        <div v-for="concept in concept_statistics" class="singleConcept" @click="toConcept(concept.id)">
          <div  class="block">
            <el-image style="width: 250px; height: 250px" :src="concept.image_url" :fit="fill">
              <template #error>
                <div class="image-slot">
                  <el-icon><Picture /></el-icon>
                </div>
              </template>
            </el-image>
          </div>
          <h2>{{ concept.display_name }}</h2>
          <span class="fontUnder">总引用量：{{ concept.cited_by_count }}</span>
          <span class="fontUnder">H指数：{{ concept.summary_stats.h_index }}</span>
        </div>

      </div>
    </el-main>
  </div>
</template>

<script>
import { req_searchSuggestions, req_getStatistics } from '../../../api'
import StarCanvas from "../components/StarCanvas.vue";
import * as echarts from 'echarts';
import PlatformStatistic from "../components/PlatformStatistic.vue";

export default {
  name: 'HomeView',
  components: {PlatformStatistic, StarCanvas},
  data() {
    return {
      searchInput: '', // 绑定搜索框输入
      selectedOption: 'paper', // 绑定下拉框选项
      sum_statistics: {},
      concept_statistics: [],
      time_statistics: [
        {
            "key": 2023,
            "doc_count": 160401,
            "cited_by_count": 328794
        }
      ]
    };
  },
  computed: {
    dynamicPlaceholder() {
      // 根据选中的选项动态生成 placeholder
      return `Search ${this.selectedOption}...`;
    },
  },
  async mounted() {
    await this.getSiatistics();
  },
  methods: {
    async getSiatistics(){
      req_getStatistics().then(response => {
        const errno = response.data.errno;
        const msg = response.data.msg;

        if (errno === 1) {
          this.sum_statistics = response.data.sum_statistics;
          this.concept_statistics = response.data.concept_statistics;
          this.time_statistics = response.data.time_statistics;
          this.renderBarChart();
        } else {
          console.error('Error:', msg);
        }
      })
      .catch(error => {
        console.error('Error', error);
      });
    },

    renderBarChart(){
      const barChart = echarts.init(this.$refs.barChart);
      const option = {
        title: {
          text: '年收录文献数量和文献引用量',
        },grid: {
          left: '14%',  // 设置左边距为 10%
          right: '10%', // 设置右边距为 10%
          top: '10%',   // 设置顶边距为 10%
          bottom: '10%', // 设置底边距为 10%
          height: '70%',
          width: '70%',
        },
        tooltip: {
          trigger: 'axis',
        },
        xAxis: {
          type: 'category',
          data: this.time_statistics.map(item => item.key),
        },
        yAxis: {
          type: 'value',
        },
        series: [
          {
            name: '文献数量',
            type: 'bar',
            data: this.time_statistics.map(item => item.doc_count),
          },
          {
            name: '引用数量',
            type: 'bar',
            data: this.time_statistics.map(item => item.cited_by_count),
          },
        ],
      };

      barChart.setOption(option);
    },
   // 获取搜索建议
    querySearchAsync(queryString, cb) {
        const target = this.selectedOption;
        req_searchSuggestions(target, queryString)
            .then(response => {
                const errno = response.data.errno;
                const msg = response.data.msg;
                const suggestionsFormatted = response.data.suggestions.map(value => ({ value }));
                if (errno === 1) {
                    cb(suggestionsFormatted);
                } else {
                    ElMessage.info(msg);
                }
            })
            .catch(error => {
                console.error('Error fetching search suggestions:', error);
            });
    },

    toConcept(conceptId){
      const concept_id = conceptId;
      const route = this.$router.resolve({
        name: 'concept', params: { concept_id }
      })
      window.open(route.href, '_blank')
    },
    // 点击搜索按钮时触发的方法
    search() {
      this.navigateToSearchResults();
    },

    // 回车键按下时触发的方法
    handleEnterKey() {
      this.navigateToSearchResults();
    },

    // 导航到搜索结果页面
    navigateToSearchResults() {
      const target = this.selectedOption;
      const keyword = this.searchInput;
      var page = 1;
      this.$router.push({
        path: '/search',
        query: { keyword, target, page },
      });
    },
  },
};
</script>

<style scoped>
@import "/src/views/home-views/css/common.css";

.home-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 3000px;
}

.el-header{
  margin-top: 100px;
  height: 200px;
}

.search-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 10px;
  margin-bottom: 200px;
}

/* 水平布局搜索框和搜索图标 */
.search-box-container {
  margin-top: 50px;
  transform: scale(1.8);
  display: flex;
  align-items: center;
}

.custom-select {
  width: 100px; /* 调整下拉框的宽度 */
  margin-right: 10px; /* 调整搜索框和图标之间的间距 */
}

.el-option {
  transform: scale(1.8);
}

.search-icon {
  color: var(--text-color);
}

.search-button {
  margin-left: 10px; /* 调整搜索图标和搜索框之间的间距 */
}

.el-main{
  display: grid;
  place-items: center;
  padding-top: 0%;
  margin-top: 2.8%;
  width: 100%;
  height: 5000px;
}

.concept{
  /* margin: 20px; */
  padding: 20px;
  width: 100%;
  display: flex;
  flex-wrap: wrap; /* 当子元素超出容器宽度时换行 */
  justify-content: space-around; /* 子元素水平分布，两端留空 */
  background-color: rgba(255, 255, 255, 0.722);
}

.singleConcept {
  cursor: pointer;
  margin: 10px; 
  display: flex;
  flex-direction: column; /* 垂直排列 */
  align-items: center; /* 子元素水平居中 */
}

.fontUnder{
  color: var(--main-color);
}

.image-slot {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  background: var(--el-fill-color-light);
  color: var(--el-text-color-secondary);
  font-size: 30px;
}

.image-slot .el-icon {
  font-size: 30px;
}

.block {
  text-align: center;
  display: inline-block;
  vertical-align: top;
}
</style>
